<template>
  <el-tag
    effect="dark"
    class="mr-15px"
    size="large"
    :closable="!props.isDetails"
    v-for="(item, index) in storeList"
    :key="item.id"
    @close="storeList!.splice(index, 1)"
    >{{ item.name }}</el-tag
  >
  <el-button @click="addStore"> <slot>添加</slot></el-button>
  <!-- 门店管理弹窗 -->
  <StoreSelectDialog ref="StoreSelectRef" @success="setStore" />
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import StoreSelectDialog from './StoreSelectDialog.vue'

defineOptions({ name: 'StoreSelect' })
// 定义属性
const props = defineProps({
  // 当前选中的门店
  modelValue: propTypes.oneOfType<any>([]).isRequired,

  isDetails: propTypes.bool.def(false)
})
// 当前的门店
const storeList = ref<EmptyArrayType>([])

/** 门店管理*/
const StoreSelectRef = ref()
// 门店选中
const addStore = () => {
  StoreSelectRef.value.open(storeList.value)
}
const setStore = (list) => {
  console.log(list)
  storeList.value = list
}
// getter
watch(
  () => props.modelValue,
  () => (storeList.value = props.modelValue),
  { immediate: true }
)

// setter
const emit = defineEmits<{
  'update:modelValue'
}>()
watch(
  () => storeList.value,
  () => emit('update:modelValue', storeList.value)
)
</script>
